


import React,{useState,useEffect} from 'react'
import { Tabs } from 'antd-mobile';
import axios from 'axios'
// import '../Xiaoxi.css'
import style from "./lyf/Xiaoxi.module.css"
import {  DownOutline } from 'antd-mobile-icons';
import img from '../imgs/1.png'

import {useNavigate} from 'react-router-dom'

export default function Xiaoxi() {
  const [qinglsit,setqinglist]=useState([])
  const [chulist,setchulist]=useState([])
  const [wailist,setwailist]=useState([])
  const navigate=useNavigate()

  //请假
  const getqinlist=()=>{
    axios.post('http://localhost:3111/qingjia/QJlist').then(res=>{
      if(res.data.code === 200){
        
        setqinglist(res.data.data)
      }
    })
  }

  useEffect(()=>{
    getqinlist()
  },[])

  //出差
  const getchulist=()=>{
    axios.get('http://localhost:3111/chuchai/chuchai_list').then(res=>{
      if(res.data.code === 200){
        
        setchulist(res.data.data)
      }
    })
  }

  useEffect(()=>{
    getchulist()
  },[])

  //外勤
  const getwailist=()=>{
    axios.get('http://localhost:3111/waiqin/waiqin_list').then(res=>{
      if(res.data.code === 200){
        
        setwailist(res.data.data)
      }
    })
  }

  useEffect(()=>{
    getwailist()
  },[])
  
  //请假详情
  const toDetail=(id)=>{
    // 更新状态为待审核(2)
    axios.put(`http://localhost:3111/qingjia/update_status/${id}`).then(res=>{
      if(res.data.code === 200){
        console.log('请假申请状态已更新为待审核');
        // 更新本地状态
        setqinglist(qinglsit.map(item => {
          if(item._id === id) {
            return {...item, zhuangtai: '2'}
          }
          return item;
        }));
      }
    }).catch(err => {
      console.error('更新状态失败:', err);
    });

    localStorage.setItem('itemid', id);
    navigate(`/zhu/xiaoxi/${id}`);
  }
  //出差详情
  const toDetail2=(id)=>{
    // 更新状态为待审核(2)
    axios.put(`http://localhost:3111/chuchai/update_status/${id}`).then(res=>{
      if(res.data.code === 200){
        console.log('出差申请状态已更新为待审核');
        // 更新本地状态
        setchulist(chulist.map(item => {
          if(item._id === id) {
            return {...item, zhuangtai: '2'}
          }
          return item;
        }));
      }
    }).catch(err => {
      console.error('更新状态失败:', err);
    });

    localStorage.setItem('itemid', id);
    navigate(`/zhu/xiaoxi2/${id}`);
  }
  //外勤详情
  const toDetail3=(id)=>{
    // 更新状态为待审核(2)
    axios.put(`http://localhost:3111/waiqin/update_status/${id}`).then(res=>{
      if(res.data.code === 200){
        console.log('外勤申请状态已更新为待审核');
        // 更新本地状态
        setwailist(wailist.map(item => {
          if(item._id === id) {
            return {...item, zhuangtai: '2'}
          }
          return item;
        }));
      }
    }).catch(err => {
      console.error('更新状态失败:', err);
    });

    localStorage.setItem('itemid', id);
    navigate(`/zhu/xiaoxi3/${id}`);
  }

  const toXiangq=(id)=>{
    localStorage.setItem('itemid', id);
    navigate(`/zhu/xiangq/${id}`);
  }

  const toXiangq2=(id)=>{
    localStorage.setItem('itemid', id);
    navigate(`/zhu/xiangq2/${id}`);
  }

  const toXiangq3=(id)=>{
    localStorage.setItem('itemid', id);
    navigate(`/zhu/xiangq3/${id}`);
  }
  

  return (
    <div>
      <div className={style.top}>
        <h2>消息</h2>
      </div>
       <Tabs style={{marginTop:'10px'}}>
          <Tabs.Tab title='待办' key='dai'>
            <div className={style.shai}>
              <span>类型<DownOutline /></span>
              <span>申请人<DownOutline /></span>
            </div>
            {/* 请假 */}
            {
              qinglsit.filter(item => item.zhuangtai === '1' || item.zhuangtai === '2').map(item=>{
                return <div className={style.qingjia}
                onClick={()=>toDetail(item._id)} key={item._id}>
                    <img src={img} />
                    <div>
                        <p style={{fontSize:'15px',fontWeight:'bolder'}}>{item.title}</p>
                        <p style={{color:'rgb(204,204,204)'}}>请假类型：<span style={{color:'rgb(54,205,54)'}}>{item.QJtype}</span></p>
                        <p style={{color:'rgb(204,204,204)'}}>请假原因：{item.yuanyin}</p>
                        <p style={{color:'rgb(204,204,204)'}}>请假时间：{item.KStime}至：{item.JStime}</p>
                    </div>
                    <span className={style.status} style={{color: item.zhuangtai === '2' ? 'rgb(68,161,252)' : 'red', borderColor: item.zhuangtai === '2' ? 'rgb(68,161,252)' : 'red'}}>
                      {item.zhuangtai === '2' ? '待审核' : '未读'}
                    </span>
                </div>
              })
            }
            {/* 出差 */}
            {
              chulist.filter(item => item.zhuangtai === '1' || item.zhuangtai === '2').map(item=>{
                return <div className={style.qingjia}
                onClick={()=>toDetail2(item._id)} key={item._id}>
                    <img src={img} />
                    <div>
                        <p style={{fontSize:'15px',fontWeight:'bolder'}}>{item.title}</p>
                        <p style={{color:'rgb(204,204,204)'}}>出差原因：{item.yuanyin}</p>
                        <p style={{color:'rgb(204,204,204)'}}>出差地点：{item.didian}</p>
                        <p style={{color:'rgb(204,204,204)'}}>出差时间：{item.CFtime}至：{item.FHtime}</p>
                    </div>
                    <span className={style.status} style={{color: item.zhuangtai === '2' ? 'rgb(68,161,252)' : 'red', borderColor: item.zhuangtai === '2' ? 'rgb(68,161,252)' : 'red'}}>
                      {item.zhuangtai === '2' ? '待审核' : '未读'}
                    </span>
                </div>
              })
            }
            {/* 外勤 */}
            {
              wailist.filter(item => item.zhuangtai === '1' || item.zhuangtai === '2').map(item=>{
                return <div className={style.qingjia}
                onClick={()=>toDetail3(item._id)} key={item._id}>
                    <img src={img} />
                    <div>
                        <p style={{fontSize:'15px',fontWeight:'bolder'}}>{item.title}</p>
                        <p style={{color:'rgb(204,204,204)'}}>外勤类型：{item.QJtype}</p>
                        <p style={{color:'rgb(204,204,204)'}}>外勤方式：{item.QJfangshin}</p>
                        <p style={{color:'rgb(204,204,204)'}}>外勤时间：{item.KStime}至：{item.JStime}</p>
                    </div>
                    <span className={style.status} style={{color: item.zhuangtai === '2' ? 'rgb(68,161,252)' : 'red', borderColor: item.zhuangtai === '2' ? 'rgb(68,161,252)' : 'red'}}>
                      {item.zhuangtai === '2' ? '待审核' : '未读'}
                    </span>
                </div>
              })
            }
          </Tabs.Tab>
          <Tabs.Tab title='已办' key='yi'>
            <div className={style.shai}>
              <span>类型<DownOutline /></span>
              <span>申请人<DownOutline /></span>
            </div>
            {/* 已办请假列表 */}
            {
              qinglsit.filter(item => item.zhuangtai === '3' || item.zhuangtai === '4').map(item => {
                return <div className={style.qingjia} 
                onClick={()=>toXiangq(item._id)} key={item._id}> 
                    <img src={img} />
                    <div>
                        <p style={{fontSize:'15px',fontWeight:'bolder'}}>{item.title}</p>
                        <p style={{color:'rgb(204,204,204)'}}>请假类型：<span style={{color:'rgb(54,205,54)'}}>{item.QJtype}</span></p>
                        <p style={{color:'rgb(204,204,204)'}}>请假原因：{item.yuanyin}</p>
                        <p style={{color:'rgb(204,204,204)'}}>请假时间：{item.KStime}至：{item.JStime}</p>
                    </div>
                    <span className={style.status} style={{color: item.zhuangtai === '3' ? 'rgb(54,205,54)' : 'red', borderColor: item.zhuangtai === '3' ? 'rgb(54,205,54)' : 'red'}}>
                      {item.zhuangtai === '3' ? '已通过' : '已拒绝'}
                    </span>
                </div>
              })
            }
            {/* 已办出差列表 */}
            {
              chulist.filter(item => item.zhuangtai === '3' || item.zhuangtai === '4').map(item => {
                return <div className={style.qingjia} 
                onClick={()=>toXiangq2(item._id)} key={item._id}>
                    <img src={img} />
                    <div>
                        <p style={{fontSize:'15px',fontWeight:'bolder'}}>{item.title}</p>
                        <p style={{color:'rgb(204,204,204)'}}>出差原因：{item.yuanyin}</p>
                        <p style={{color:'rgb(204,204,204)'}}>出差地点：{item.didian}</p>
                        <p style={{color:'rgb(204,204,204)'}}>出差时间：{item.CFtime}至：{item.FHtime}</p>
                    </div>
                    <span className={style.status} style={{color: item.zhuangtai === '3' ? 'rgb(54,205,54)' : 'red', borderColor: item.zhuangtai === '3' ? 'rgb(54,205,54)' : 'red'}}>
                      {item.zhuangtai === '3' ? '已通过' : '已拒绝'}
                    </span>
                </div>
              })
            }
            {/* 已办外勤列表 */}
            {
              wailist.filter(item => item.zhuangtai === '3' || item.zhuangtai === '4').map(item => {
                return <div className={style.qingjia} 
                onClick={()=>toXiangq3(item._id)} key={item._id}>
                    <img src={img} />
                    <div>
                        <p style={{fontSize:'15px',fontWeight:'bolder'}}>{item.title}</p>
                        <p style={{color:'rgb(204,204,204)'}}>外勤类型：{item.QJtype}</p>
                        <p style={{color:'rgb(204,204,204)'}}>外勤方式：{item.QJfangshin}</p>
                        <p style={{color:'rgb(204,204,204)'}}>外勤时间：{item.KStime}至：{item.JStime}</p>
                    </div>
                    <span className={style.status} style={{color: item.zhuangtai === '3' ? 'rgb(54,205,54)' : 'red', borderColor: item.zhuangtai === '3' ? 'rgb(54,205,54)' : 'red'}}>
                      {item.zhuangtai === '3' ? '已通过' : '已拒绝'}
                    </span>
                </div>
              })
            }
          </Tabs.Tab>
        </Tabs>
    </div>
  )
}
